<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<!-- 资源内容-->
			<graceEmptyNew v-if="itemNull">
				<view slot="img" class="empty-view">
					<image class="empty-img" mode="widthFix" src="../../static/empty.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到记录</text>
			</graceEmptyNew>					
			<view v-if="!itemNull" >
				<!-- 课程练习 -->
				<view class="grace-list-items grace-body" v-for="(item, index) in logs" :key="index">
					<view class="grace-list-body grace-border-b" @tap="study(item)">
						<view class="grace-list-title grace-margin-top">
							<!-- 课程 -->
							<text class="grace-list-title-text">{{item.field3}}</text>
							<!-- 正确率 -->
							<text class="grace-list-title-text">正确率：{{item.field8}}%</text>
						</view>
						<!-- 进度 -->
						<view class="grace-margin-top">
							<view class="progress-bar" :style="{height: height,backgroundColor:dsColor}">
								<view class="progress" :style="{width: item.field6+'%', backgroundColor: bgColor,borderRadius: borderRadius}">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
var _self;
export default {
    data() {
    	return {
			scrollHeight : 500,
			// logs : [
			// 	['1', '航线科一', '20%', '20%'],
			// 	['2', '航线科二', '%33', '20%']
			// ],
			logs : [],
			barText : '85/1000',
			userInfoData : "",
			token:"",
			pageNum : 1,
			//每次加载的记录数
			pageSize : 10,
			itemNull : true
		}
    },
	onLoad: async function(e){
		_self = this;
		//页面加载时读取一次缓存
		_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
		//获取token，同步方法
		_self.token =  await _self.$myFunction.getToken();
		_self.token = _self.token.token;	
		// if(!_self.userInfoData){
		// 	//因此页面是主页面，页面显示完成之后才能进行是否登录判断，延时2秒解决未登录提示一闪而过现象
		// 	uni.showToast({title: '您未登录',icon: 'none'});//默认显示1500毫秒
		// 	setTimeout(function () {
		// 		uni.navigateTo({
		// 			url:"../loginReg/index"
		// 		})	
		// 	}, 1500);
		// }else{	
		// 	_self.getObject(_self.userInfoData.field2);			
		// }
		_self.getObject('18609146371');	
	},
	components:{
		gracePage
	},
	props: {
		//文字是否内显
		textInside: {
			type: Boolean,
			default: true
		},
		//文字颜色
		color: {
			type: String,
			default: '#FFFFFF'
		},
		//文字大小
		fontSize: {
			type: String,
			default: '24rpx'
		},
		//进度条颜色
		bgColor: {
			type: String,
			default: '#5cb85c'
		},
		//进度条底色颜色
		dsColor: {
			type: String,
			default: '#f2f2f2'
		},
		//进度条高度
		height: {
			type: String,
			default: '58rpx'
		},
		//进度条圆角弧度
		borderRadius: {
			type: String,
			default: '18rpx'
		}
	},
	methods:{
		getObject : function(phone){
			uni.showToast({
				title: '请稍后...',
				duration:_self.$myFunction.appConfig().requestWaitTime,
				icon: 'none',
			});
			var params = {
				'field2':phone,
				'pageNum':_self.pageNum,
				'pageSize':_self.pageSize,
				'field':"createTime",
				'order':'desc',
				'status':"1"
			};
			//重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
			_self.token = _self.$myFunction.appStorage('wuLuToken').token;				
			uni.request({
				url:  _self.$myFunction.appConfig().serverAddress+'studyList',
				data: params,
				method : "POST",
				header : {
					'content-type':'application/x-www-form-urlencoded',
					'Authentication':_self.token
				},		
				success: data => {
					// 刷新完毕后关闭刷新
					uni.hideToast();
					_self.$myFunction.displayLog("服务器返回数据："+JSON.stringify(data));					
					if (data.data.code == 200) {
						//总记录数
						var total = data.data.data.total;
						_self.$myFunction.displayLog("服务器返回数据总记录数："+total);
						var objectsData=data.data.data.rows;
						_self.$myFunction.displayLog("服务器返回当前查询条件记录数："+objectsData.length);						
						if(total == 0){//查询到0条记录
							return;
						}else{
							_self.logs.splice(0);	
							for (let i = 0; i < objectsData.length; i++) {
								_self.logs.push(objectsData[i]);
							}
							_self.itemNull = false;
						}
					}else{
						//如果请求数据因token认证失败，则清空缓存token
						if(data.data.message.indexOf("接口访问未认证") != -1){
							uni.setStorage({
								key: 'wuLuToken',
								data: "",
								success: function () {	
									_self.$myFunction.displayLog("清空缓存token");
									//触发重新获取token
									_self.$myFunction.getToken();
									// 关闭所有页面，打开到应用内的某个页面。
									_self.$myFunction.displayLog("重加载当前页面");
									uni.reLaunch({
										url: '/pages/study/index'
									});
								}
							});
						}else{
							_self.$myFunction.displayLog("列表读取失败："+JSON.stringify(data));
							uni.hideToast();
							uni.showToast({title: '连接失败...',icon: 'none'});
						}	
					}
				},
				fail: (data, code) => {
					uni.hideToast();
					uni.showToast({title: '连接失败...',icon: 'none'});
				}
			});				
		},
		study : function(item){
			uni.showModal({
				title: '提示',
				content: '重新开始练习？',
				success: function (res) {
					if (res.confirm) {
						uni.redirectTo({
							url:"../study/topic?id="+item.field1
						})
					} else if (res.cancel) {
						uni.redirectTo({
							url:"../study/userTopic?id="+item.field1+"&studyCode="+item.field10+"&answerNum="+item.field5+"&answerRightNum="+item.field7
						})
					}
				}
			});
		}
	}
}
</script>
<!-- 进度条样式 -->
<style scoped>
	.progress-bar {
		position: relative;
		width: 100%;
		background-color: #f2f2f2;
		border-radius: 16rpx;
	}
	.progress {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
</style>
